﻿<%@ page language="java" import="java.util.*"
	contentType="text/html; charset=utf-8"%>
	<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css"
	href="lib/Hui-iconfont/1.0.7/iconfont.css" />
<link rel="stylesheet" type="text/css" href="lib/icheck/icheck.css" />

<link rel="stylesheet" type="text/css" href="skin/default/skin.css"
	id="skin" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js"></script>

<style type="text/css">
body, #l-map {
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0;
}
</style>

<!-- 百度地图秘钥 -->
<script
	src="http://api.map.baidu.com/api?v=2.0&ak=0EqkFfOceuwLZnVvG6dIocEiqos83G34"
	type="text/javascript"></script>
<!--<script type="text/javascript" src="http://api.map.baidu.com/api?type=quick&ak=0EqkFfOceuwLZnVvG6dIocEiqos83G34
&v=1.0"></script>-->

<title>添加电子围栏</title>
</head>
<body>
	<nav class="breadcrumb"> <i class="Hui-iconfont">&#xe67f;</i> 首页
	<span class="c-gray en">&gt;</span> 被监护人管理 <span class="c-gray en">&gt;</span>
	电子围栏管理 <span class="c-gray en">&gt;</span>添加围栏
	<a  class="btn btn-success radius r"
		style="line-height: 1.6em; margin-top: 3px"
		href="javascript:location.replace(location.href);" title="刷新">
		<i class="Hui-iconfont">&#xe68f;</i></a></nav>

	<div class="page-container" id="time">
		<!-- 	<div class="cl mt"> <span class="l"><a href="javascript:;" onclick="member_add('添加用户','member-add.jsp','','510')"  class="btn btn-primary radius"><i class="Hui-iconfont">&#xe600;</i> 添加电子围栏</a></span> </div>
 -->
		<form id="addFence"  >
			<td class="text-r">
				围栏名称：
			</td> 
			<input type="text" class="input-text"
				style="width: 150px" placeholder="围栏名称" id="fence_name"  name="">
			<td class="text-r">
				围栏半径：
			</td> 
			<input type="text" class="input-text" 
				style="width: 100px" placeholder="围栏半径" id="fence_r" name="">
			<td class="text-r">
				m
			</td>
			<td class="text-r">
				经度：
			</td> 
			<input type="text" class="input-text"
				style="width: 150px" placeholder="经度" id="fence_coor_lng" name=""value="">
			<td class="text-r">
				纬度：
			</td> 
			<input type="text" class="input-text"
				style="width: 150px" placeholder="纬度" id="fence_coor_lat" name=""
				value=""><br>

			<td class="text-r">报警条件：</td> 
			<select class="select" size="1"
				style="width: 150px">
				<option value="1">进入时触发提醒</option>
				<option value="2">离开时触发提醒</option>
				<option value="3">进入离开均触发提醒</option>
			</select>
			<td class="text-r">围栏生效时间：</td>
			<!-- <input type="text" onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'datemax\')||\'%y-%M-%d-%h-%m-%s\'}'})" id="datemin" class="input-text Wdate" style="width:120px;">
		-
		<input type="text" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'datemin\')}',maxDate:'%y-%M-%d'})" id="datemax" class="input-text Wdate" style="width:120px;"> -->
			 <input type="text"
				onfocus="WdatePicker({skin:'whyGreen',dateFmt:'HH:mm'})"
				id="datemin" class="input-text Wdate" style="width: 200px;">
			- <input type="text"
				onfocus="WdatePicker({skin:'whyGreen',dateFmt:'HH:mm'})"
				id="datemax" class="input-text Wdate" style="width: 200px;"> 
			<button type="button" class="btn btn-success radius"
				onclick="addFence()" id="" name="">
				<i class="Hui-iconfont">&#xe678;</i>添加电子围栏
			</button>
			</br>
		</form>
	</div>



	<div id="l-map"></div>
</body>
</html>
<script type="text/javascript" src="lib/layer/2.1/layer.js"></script>
<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="lib/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript"
	src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<link rel="stylesheet"
	href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
<script type="text/javascript">
	/* addLable('围栏名称：','fence_name');
	 addLable('围栏半径：','fence_r');
	 addLable('经度：','fence_coor_lng');
	 addLable('纬度：','fence_coor_lat');*/

	var map = new BMap.Map("l-map");
	map.centerAndZoom(new BMap.Point(116.37231894589, 39.976018510037), 14);

	map.addControl(new BMap.NavigationControl()); //地图平移缩放控件PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方。
	map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。
	map.addControl(new BMap.ScaleControl()); //比例尺控件，默认位于地图左下方，显示地图的比例关系。
	map.addControl(new BMap.MapTypeControl()); //地图类型控件，默认位于地图右上方。
	map.addControl(new BMap.GeolocationControl()); //定位控件，针对移动端开发，默认位于地图左下方。
	map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
	map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
	
	var name = document.getElementById('fence_name');

	var coor_lng = document.getElementById('fence_coor_lng');
	var coor_lat = document.getElementById('fence_coor_lat');
	var r = document.getElementById('fence_r');
	var marker = new BMap.Marker();
	//coor.setValue(e.point.lng + "," + e.point.lat);
	var cicle = new BMap.Circle();
	map.addEventListener("click", function(e) {
		//layer.alert('请输入围栏半径');
		map.clearOverlays();
		coor_lng.value = e.point.lng;
		coor_lat.value = e.point.lat;
		marker.setPosition(e.point);
		map.addOverlay(marker);// 将标注添加到地图中
		var cicle_r = window.prompt('请输入半径');

		cicle.setCenter(e.point);
		cicle.setFillColor('蓝色');
		cicle.setRadius(cicle_r);
		map.addOverlay(cicle);
		document.getElementById('fence_r').value = cicle_r;
		//alert(e.point.lng + "," + e.point.lat);
	});
	r.addEventListener("change", function() {
		map.clearOverlays();
		map.addOverlay(marker);
		cicle.setRadius(r.value);
		map.addOverlay(cicle);
	});


	function addFence() {
		var addFence = document.getElementById("addFence");
		var wl_name = $("#fence_name").val();
		var wl_bj = $("#fence_r").val();
		var lng = $("#fence_coor_lng").val();
		var lat = $("#fence_coor_lat").val();
		var bjtj = $(".select").val();
		var datemin = $("#datemin").val();
		var datemax = $("#datemax").val();
		console.info(wl_name)
		console.info(wl_bj)
		console.info(lng)
		console.info(lat)
		console.info(bjtj)
		console.info(datemin)
		console.info(datemax) 
		
		$.ajax(
			{
			type : 'get',
			url : '<%=path%>/fence/creatFence',
			dataType : 'json',
	 		data : {
				ak : '0EqkFfOceuwLZnVvG6dIocEiqos83G34',
				service_id : 117396,
				name : wl_name,
				creator : '${user.username}',
				monitored_persons : '${param.username}',
				observers : '${user.username}',
				valid_times : datemin+","+datemax, //随后需要做调整
				valid_cycle : 4,
				valid_date : datemin,
				shape : 1,
				coord_type : 1,
				center : lng + "," + lat,
				radius : wl_bj,
				alarm_condition : bjtj
			}, 
			success:function(result) {
				console.info(result);
				if(result.status == 0){
					alert("创建成功");
				}else if(result == -1){
					alert("半径必须为小于5000的正数");
				}else{
					alert("创建失败"+result.message);
				}
			},
			error:function(result) {
				alter("error");
			}
		})
		//alert("执行完毕");
	};
</script>


